<template>
  <div class="commonBody">
    <!--列表：搜索框-->
    <div class="searchBody" v-if="showPage">
      <div class="leftSearch" :style="{ width: '85%' }">
        <el-form :model="searchForm" ref="searchFormRef" class="searchForm">
          <div class="leftSearch">
            <el-form-item label="分类名称" prop="name">
              <el-input
                class="inputWidth"
                v-model="searchForm.name"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="创建时间"
              class="dateSearchItem"
              prop="createTime"
            >
              <el-date-picker
                v-model="searchForm.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="分类名称" prop="name">
              <el-input
                class="inputWidth"
                v-model="searchForm.name"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>

        <div class="rightSearch" :style="{ width: '15%' }">
          <el-button type="primary" size="default" @click="pageSearch"
            >搜索</el-button
          >
          <el-button @click="pageReset" size="default">重置</el-button>
        </div>
      </div>

      <div class="btnBody">
        <el-button
          class="btnNormal"
          type="primary"
          icon="plus"
          size="default"
          @click="edit(1)"
          >新增</el-button
        >
        <el-tooltip class="refreshBtn" effect="dark" content="刷新页面">
          <el-button type="text" @click="refreshTable">
            <el-icon :size="20" class="refreshIcon"><refresh /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <div v-permission="['category/list']" v-if="showPage">
      <c-table
        ref="tableRef"
        :pageData="pageData"
        :loading="tableLoading"
        @pageCurrentChange="pageCurrentChange"
        @pageSizeChange="pageSizeChange"
      >
        <el-table-column
          prop="name"
          label="分类名称"
          min-width="150"
          align="center"
          :resizable="false"
        ></el-table-column>

        <el-table-column
          prop="sort"
          label="排序"
          width="80"
          align="center"
          :resizable="false"
        ></el-table-column>

        <el-table-column
          prop="isShow"
          label="是否显示"
          width="100"
          align="center"
          :resizable="false"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="级别"
          width="150"
          align="center"
          :resizable="false"
        >
          <template #default="scope">
              <el-tag
                :type="scope.row.level === 1 ? 'danger' : (scope.row.level === 1?'warning':'success')"
                >{{ scope.row.level === 1 ? '顶级分类' : scope.row.level+'级分类' }}
            </el-tag>
          </template>
                
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="100"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          min-width="100"
          align="center"
          :resizable="false"
        ></el-table-column>
        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              size="default"
              @click="edit(3, scope.row)"
              icon="view"
              >详情
            </el-button>
            <el-button
              type="primary"
              plain
              size="default"
              @click="edit(2, scope.row)"
              icon="editPen"
              >修改
            </el-button>
            <span class="deleteBtn" @click.stop="() => {}">
              <del-model
                :delData="scope.row"
                btnText="删除"
                cancelText="取消"
                confirmText="确定"
                titleText="确定要删除该项吗?"
                popWidth="300"
                delIcon="delete"
                @cancel="onCancel"
                @confirm="del"
              ></del-model>
              <!-- <el-popconfirm
                width="300"
                icon-color="#dc2626"
                title="确定要删除该项吗?"
                @cancel="onCancel"
                @confirm="del(scope.row)"
              >
                <template #reference>
                  <el-button type="danger" plain size="default" icon="delete"
                    >删除
                  </el-button>
                </template>
                <template #actions="{ confirm, cancel }">
                  <el-button size="default" @click="cancel">取消</el-button>
                  <el-button type="danger" size="default" @click="confirm">
                    确定
                  </el-button>
                </template>
              </el-popconfirm> -->
            </span>
          </template>
        </el-table-column>
      </c-table>
    </div>

    <drawerModal
      ref="drawerModalRef"
      :drawerTitle="'模块' + modalTitle"
      :drawerSize="'75%'"
      :headerBottom="true"
      :closeOnClickModal="false"
      :loading="loadingModal"
      :showConfirm="modalTitle != '详情'"
      @submit="saveModal"
    >
      <slot>
        <el-form
          ref="formRef"
          :rules="inputRules"
          :model="inputForm"
          :disabled="modalTitle == '详情'"
          :hide-required-asterisk="false"
        >
          <el-form-item
            label="模块名称"
            prop="name"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.name" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="SEO标题"
            prop="seoTitle"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.seoTitle" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="SEO关键字"
            prop="seoKeyword"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.seoKeyword" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="SEO描述"
            prop="seoDescription"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.seoDescription" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="模块封面"
            prop="picCover"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.picCover" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="轮播图列表"
            prop="picList"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.picList" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="所属分类"
            prop="categoryId"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.categoryId" autocomplete="off" clearable>
            </el-input>
          </el-form-item>


          <el-form-item
            label="内容推送类型"
            prop="contentRecommend"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.contentRecommend" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="上级模块"
            prop="parentId"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.parentId" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="模块内容"
            prop="content"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.content" autocomplete="off" clearable>
            </el-input>
          </el-form-item>


          <el-form-item
            label="视频分类"
            prop="videoType"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.videoType" autocomplete="off" clearable>
            </el-input>
          </el-form-item>
          
          <el-form-item
            label="视频内容"
            prop="video"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.video" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="视频封面"
            prop="videoCover"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.videoCover" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="视频标题"
            prop="videoTitle"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.videoTitle" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="视频描述"
            prop="videoDesc"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.videoDesc" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="模块路径" prop="modulePath" :label-width="formLabelWidth">
            <el-input v-model="inputForm.modulePath" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
            <el-input v-model="inputForm.sort" autocomplete="off" clearable>
            </el-input>
          </el-form-item>

          <el-form-item
            label="显示"
            prop="isShow"
            :label-width="formLabelWidth"
          >
            <!-- <el-input
              v-model="inputForm.isShow"
              autocomplete="off"
              clearable
            >
            </el-input> -->
            <el-switch
              v-model="inputForm.isShow"
              style="
                --el-switch-on-color: var(--el-color-primary);
                --el-switch-off-color: #b5b7ba;
              "
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>

          <el-form-item
            label="分类级别"
            prop="level"
            :label-width="formLabelWidth"
          >
            <el-input v-model="inputForm.level" :disabled="true" autocomplete="off" clearable>
            </el-input>
          </el-form-item>
        </el-form>
      </slot>
    </drawerModal>
  </div>
</template>

<script setup>
import cTable from "@/components/common/cTable.vue";
import drawerModal from "@/components/modal/drawer/drawerModal.vue";
import delModel from "@/components/common/modal/delModel.vue";

import {
  ref,
  reactive,
  getCurrentInstance,
  toRefs,
  watch,
  onMounted,
  onBeforeUnmount,
} from "vue";

import { useCategory } from "./list";

const {
  tableLoading,
  tableRef,
  pageData,
  searchForm,
  searchFormRef,

  getList,
  edit,
  del,
  pageSizeChange,
  pageCurrentChange,
  pageSearch,
  pageReset,
  changeStatus,

  drawerModalRef,
  formRef,
  modalTitle,
  saveModal,
  inputForm,
  inputRules,
  formLabelWidth,
  loadingModal,

  showPage,
} = useCategory();

function onCancel(e) {
  console.log("can-e: ", e);
}

function refreshTable() {
  location.reload();
}
</script>

<style lang="scss" scoped>
@use "@/common";
</style>